<!--金牌顾问详情 -->
<template>
    <div style="position: relative; padding-bottom: 200px" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"
        element-loading-background="rgba(255, 255, 255, 0.8)">
        <div v-show="!loading">
            <div class="minpian" style="width:940px!important;">
                <img class="minpian_img" :src="agentInfo && agentInfo.image
                    ? agentInfo.image
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " />
                <div class="minpian_center">
                    <div class="minpian_center_one">
                        <div style="display: flex; align-items: center">
                            <div style="font-size: 24px; font-weight: 500">
                                <!-- {{
                  (agentInfo.userInfo && agentInfo.userInfo.nikeName) ||
                  "未命名用户"
                }} -->


                                {{ (agentInfo && agentInfo.nikeName) || "未命名用户" }}
                            </div>
                            <user-label :userInfo="agentInfo" al="flex-start" style="margin-left:12px;">
                            </user-label>

                            <!-- <div class="jjr" v-if="agentInfo && agentInfo.isAgent == '1'">
                  经纪人
                </div>
                <div class="jjr" v-else>个人用户</div> -->
                        </div>
                        <div class="minpian_center_one">
                            <div style="
              font-size: 22px;
              font-weight: 400;
              display: flex;
              color: #aaaaaa;
            " v-if="agentInfo && agentInfo.isAgent == 1">

                            </div>
                            <div @click="companyDeilta(agentInfo)" v-if="agentInfo && agentInfo.isAgent == '1'">
                                <span>我的公司</span>
                                <img style="width: 15px; height: 15px" src="@/assets/bbcz/tpxqy01.png" alt="" />
                            </div>
                        </div>

                    </div>
                    <div class="minpian_center_one">
                        <div style="display:flex;align-items: center;height:100%">
                            <div class="vip-level pointer" v-if="agentInfo && agentInfo != ''" :style="{
                                backgroundColor: colors[agentInfo.memberLevel - 1].bgColor,
                                color: colors[agentInfo.memberLevel - 1].wordColor,
                                borderColor: colors[agentInfo.memberLevel - 1].lineColor
                            }">
                                {{ agentInfo.memberLevelTitle }}
                            </div>
                        </div>
                        <div class="wei">

                        </div>
                    </div>

                    <div class="contactWay" v-if="!disa">
                        <div style="display: flex;">
                            <div @click="chat(agentInfo)"
                                style="cursor: pointer;display: flex;width: 130px;height: 50px;background-color: #64b6a8;border-radius: 10px;align-items: center;justify-content: center;">
                                <img style="width: 33px;height: 33px;" src="@/assets/weixin_b.png" />
                                <span style="color: #FFFFFF;">在线聊天</span>
                            </div>
                            <div style="cursor: pointer;margin-left: 20px;display: flex;height: 50px;padding: 0 15px;background-color: #64b6a824;color: #64b6a8;border-radius: 10px;align-items: center;justify-content: center;"
                                @click="phoneCheck">
                                <img style="width: 33px;height: 33px;" src="@/assets/dianhua_lan.png" />
                                <span>{{ phonestate ? agentInfo.phone : "拨打电话" }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 940px; margin: auto">
                <div class="bottom">
                    <div class="titLiat">
                        <div @click="titClick(1)" v-if="agentInfo.type == 2 ||
                            agentInfo.type == 3 ||
                            agentInfo.type == 4
                            " :class="xuanzhong == 1 ? 'li cur' : 'li'">
                            <p>全部</p>
                            <img v-if="xuanzhong == 1" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(2)" v-if="agentInfo.type == 3 || agentInfo.type == 4"
                            :class="xuanzhong == 2 ? 'li cur' : 'li'">
                            <p>到店新车</p>
                            <img v-if="xuanzhong == 2" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(3)" v-if="agentInfo.type == 1 ||
                            agentInfo.type == 3 ||
                            agentInfo.type == 4
                            " :class="xuanzhong == 3 ? 'li cur' : 'li'">
                            <p>二手车</p>
                            <img v-if="xuanzhong == 3" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(4)" v-if="agentInfo.type == 3" :class="xuanzhong == 4 ? 'li cur' : 'li'">
                            <p>车系</p>
                            <img v-if="xuanzhong == 4" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(5)" v-if="agentInfo.type == 1 || agentInfo.type == 2"
                            :class="xuanzhong == 5 ? 'li cur' : 'li'">
                            <p>新房</p>
                            <img v-if="xuanzhong == 5" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(6)" v-if="agentInfo.type == 1 || agentInfo.type == 2"
                            :class="xuanzhong == 6 ? 'li cur' : 'li'">
                            <p>二手房</p>
                            <img v-if="xuanzhong == 6" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(7)" v-if="agentInfo.type == 1 || agentInfo.type == 2"
                            :class="xuanzhong == 7 ? 'li cur' : 'li'">
                            <p>出租房</p>
                            <img v-if="xuanzhong == 7" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(8)" v-if="agentInfo.type == 5" :class="xuanzhong == 8 ? 'li cur' : 'li'">
                            <p>服务项目</p>
                            <img v-if="xuanzhong == 8" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(10)" v-if="(agentInfo.businessType != 0 && agentInfo.isShop == 1) ||
                            agentInfo.businessType == 0
                            " :class="xuanzhong == 10 ? 'li cur' : 'li'">
                            <p>招聘</p>
                            <img v-if="xuanzhong == 10" src="@/assets/xuanzhong.png" />
                        </div>
                        <div @click="titClick(9)" :class="xuanzhong == 9 ? 'li cur' : 'li'">
                            <p>帮友圈</p>
                            <img v-if="xuanzhong == 9" src="@/assets/xuanzhong.png" />
                        </div>
                    </div>
                </div>
                <div class="list" v-if="(xuanzhong == 1 && agentInfo.type == 3) ||
                    (xuanzhong == 1 && agentInfo.type == 4) ||
                    xuanzhong == 2 ||
                    xuanzhong == 3 ||
                    xuanzhong == 4
                    ">
                    <div class="li" v-for="(item, index) in houseList" :key="index">
                        <img class="biao" @click="details(item, '1')" :src="item.vehicleCoverPicture
                            ? item.vehicleCoverPicture
                            : $img + item.houseImageDiv
                            " style="
                object-fit: contain;
                cursor: pointer;
                background-color: #00000033;
              " />
                        <div class="name">
                            <div class="t_1" @click="details(item, '1')">
                                <tag-view :item="item"></tag-view>{{
                                    item.vehicleBrandModel
                                    ? (item.vehicleBrandModel.split("|")[0] || "") +
                                    " " +
                                    (item.vehicleBrandModel.split("|")[1] || "")
                                    : ""
                                }}
                                {{ item.model ? item.model + "/" : "" }}
                                {{
                                    item.bodyStructureDoors +
                                    "门" +
                                    item.bodyStructureSeat +
                                    "座" +
                                    item.bodyStructureVehicle +
                                    "车"
                                }}
                            </div>
                            <div class="t_4">
                                <img style="border-radius: 31px" :src="item.userInformation
                                            ? item.userInformation.image ||
                                            'https://pic.bangbangtongcheng.com/static/my/header.png'
                                            : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                                        " />
                                <span style="cursor: pointer">{{
                                    item.userInformation
                                    ? item.userInformation.nikeName || "未命名用户"
                                    : "未命名用户"
                                }}</span>
                                <div @click.stop="shopdetails(item, '1')" style="cursor: pointer;padding:0 6px;">
                                    {{
                                        item.distributor ? item.distributor.storeName : "个人车源"
                                    }}
                                </div>
                            </div>
                        </div>
                        <div class="qian" v-if="item.vehicleType == 3">
                            <p class="p1">{{ item.intervalPrice }}万</p>
                        </div>
                        <div class="qian" v-else>
                            <p class="p1">{{ item.price }}万</p>
                        </div>
                    </div>
                    <div v-if="houseList.length == 0">
                        <el-empty description="没有更多数据"></el-empty>
                    </div>
                </div>
                <div class="list" v-if="(xuanzhong == 1 && agentInfo.type == 2) ||
                    xuanzhong == 5 ||
                    xuanzhong == 6 ||
                    xuanzhong == 7
                    ">
                    <div class="lify" v-for="(item, index) in houseList" :key="index">
                        <img class="biao" @click="details(item, '2')" :src="item.displayDiagram ||
                            item.display_diagram ||
                            (item.houseImage && item.houseImage.split('|')[0]) ||
                            (item.house_image && item.house_image.split('|')[0])
                            " />
                        <div class="name">
                            <div class="t_1" @click="details(item, '2')">
                                <tag-view :item="item"></tag-view>{{ item.title }}
                            </div>
                            <div class="t_2">
                                <span style="margin-right: 5px">{{ item.region }}</span>
                                <span>{{ item.address }}</span>
                            </div>
                            <div class="t_3">
                                <span style="margin-right: 16px">{{ item.house_type }}</span>
                                <span style="margin-right: 16px">{{ item.AREA }}m²</span>
                                <span>{{ item.foors }}</span>
                            </div>
                            <div class="t_4">
                                <img style="border-radius: 31px;" :src="item.image
                                    ? item.image
                                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                                    " />
                                <span>{{ item.nikeName || "未命名用户" }}</span>
                                <div style="cursor: pointer;" @click="shopdetails(item, '2')">
                                    {{ item.shop_name || "个人房源" }}
                                </div>
                            </div>
                        </div>
                        <div class="qian" v-if="item.transaction_type == 2">
                            <p class="p1">{{ item.price }}万</p>
                            <p class="p2">
                                {{ ((item.price * 10000) / item.AREA).toFixed(2) }}元/m²
                            </p>
                        </div>
                        <div class="qian" v-else>
                            <p class="p1">{{ item.price }}元/月</p>
                        </div>
                    </div>
                    <div v-if="houseList.length == 0">
                        <el-empty description="没有更多数据"></el-empty>
                    </div>
                </div>
                <div class="list" v-else-if="xuanzhong == 8">
                    <div class="lifw" v-for="(item, index) in houseList" :key="index">
                        <img class="biao" @click="detail(item, '3')" style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #00000033;
                " :src="item.coverPhoto ? item.coverPhoto : $img + item.houseImageDiv
                    " />
                        <div class="fwxm">
                            <div class="t_1" style="cursor: pointer" @click="detail(item, '3')">
                                {{ item.entryName }}
                            </div>
                            <div class="t_2 " style="cursor: pointer" @click="detail(item, '3')">
                                <span style="margin-right: 5px" class="line7">{{
                                    item.entryDescription
                                }}</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="houseList.length == 0">
                        <el-empty description="没有更多数据"></el-empty>
                    </div>
                </div>
                <div class="fenye" v-if="xuanzhong < 9">
                    <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
                        :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
                </div>
            </div>
            <div v-if="xuanzhong == 9">
                <!-- 帮友圈 -->
                <template v-for="s in ceshiArr">
                    <friend-item :item="s" types="3" noGutter :wrapWidth="940" @reData="getMoreData"
                        :key="s.id"></friend-item>
                </template>
                <div v-if="ceshiArr.length == 0">
                    <el-empty description="还没有发布帮友圈"></el-empty>
                </div>
                <div class="fenye">
                    <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
                        :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
                </div>
            </div>
            <div v-if="xuanzhong == 10" style="margin:auto;width:940px;">
                <!-- 招聘 -->
                <template v-for="s in houseList">
                    <invite-item :item="s" :pt="0" :key="s.id" line></invite-item>
                </template>
                <div v-if="houseList.length == 0">
                    <el-empty description="暂无数据"></el-empty>
                </div>
                <div class="fenye">
                    <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
                        :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
                </div>
            </div>
            <p class="mzsm"
                style="margin-top:-40px;margin-bottom:30px;width:940px;margin-left: 50%;transform: translateX(-50%);">
                {{ disclaimerContent }}
            </p>
            <report ref="report" :bUserId="agentInfo.id"></report>
            <chat ref="chats"></chat>
            <inform ref="inform" :bUserId="bUserId" :businessType="businessType"></inform>
        </div>
    </div>
</template>
  
<script>
import floor from "@/components/floor";
import heads from "@/components/head";
import report from "@/components/report.vue";
import chat from "@/components/chat.vue";
import tools from "@/components/tools.vue";
import inform from "@/views/index/inform";
import friendItem from "@/views/index/comp/bbcz-friend-circle-item.vue";
import inviteItem from "@/views/invite/comp/item"; //邀请item

export default {
    components: {
        floor,
        heads,
        report,
        chat,
        tools,
        inform,
        friendItem,
        inviteItem
    },
    data() {
        return {
            collectTotal: "",
            businessType: "",
            isPhoneShow: false,
            bUserId: "",
            agentInfo: "",
            disa: false,
            phonestate: false,
            // list: [
            //   { num: 0, name: "全部" },
            //   { num: 1, name: "新车" },
            //   { num: 2, name: "二手车" },
            //   { num: 3, name: "帮友圈" }
            // ],
            xuanzhong: 1,
            housePage: {
                pageSize: 10,
                pageNo: 1
                // userId:'',
            },
            houseList: [],
            housetotal: 0,
            loginstate: false,
            user: {},
            isCollection: 0,
            userInfo: {},
            ceshiArr: [],
            userId: "",
            loading: true,
            colors: [
                {
                    bgColor: "#E9EFEF",
                    wordColor: "#60807D",
                    lineColor: "#B6C4C3",
                    level: "青铜会员"
                },
                {
                    bgColor: "#F7F7F7",
                    wordColor: "#A3AAB0",
                    lineColor: "#D2D9E0",
                    level: "白银会员"
                },
                {
                    bgColor: "#FFF8DE",
                    wordColor: "#CEAB21",
                    lineColor: "#D3CAB2",
                    level: "黄金会员"
                },
                {
                    bgColor: "#EDFAFF",
                    wordColor: "#59B0E6",
                    lineColor: "#BBD0DB",
                    level: "铂金会员"
                },
                {
                    bgColor: "#F2F5FF",
                    wordColor: "#284EB6",
                    lineColor: "#C1CBEF",
                    level: "钻石会员"
                },
                {
                    bgColor: "#FDF7FF",
                    wordColor: "#A877C6",
                    lineColor: "#DBC6E8",
                    level: "钻石Ⅰ会员"
                },
                {
                    bgColor: "#F8F2FF",
                    wordColor: "#78439F",
                    lineColor: "#958AC3",
                    level: "钻石Ⅱ会员"
                },
                {
                    bgColor: "#F4F2F2",
                    wordColor: "#8D4581",
                    lineColor: "#907B8C",
                    level: "钻石Ⅲ会员"
                },
                {
                    bgColor: "#F4F2F2",
                    wordColor: "#502E30",
                    lineColor: "#795D5E",
                    level: "王者会员"
                }
            ]
        };
    },
    created() {
        this.id = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).id : '';

        this.getUser();

        this.init(this.id);

        // this.getDisclaimers(6);
    },
    methods: {
        showPhone() {
            // agentInfo.userInfo.phone
            this.insertCallRecord({
                userId: this.agentInfo.id,
                phone: this.agentInfo.phone,
                businessType: this.agentInfo.businessType,
                callType: 1
            });
        },
        // 去帮友圈详情
        goFriendDetails(item) {
            console.log("itemitemitemitem", item);
            this.openUrl({
                path: "/my/friendsCircleDetails",
                query: {
                    id: item.id
                }
            });
        },
        phoneGet() {
            if (!this.loginstate) {
                this.$message({
                    message: "请登录！",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
                return false;
            }
            console.log("111");
            this.isPhoneShow = !this.isPhoneShow;
        },
        init(id) {
            // 在售车系/金牌顾问/帮友圈/现车销售
            // 全部/新车/二手车/帮友圈
            this.getUserInfoByUserId(id);

            // if (this.loginstate) {
            //     this.increaseBrowsingRecord();
            // }

            // this.getHouseInfo()
        },
        increaseBrowsingRecord() {
            this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
                browseRecordId: this.id,
                viewersId: this.user.id,
                businessType: 2,
                browsingRecords: 1
            }).then(res => { });
        },
        getUserInfoByUserId(id) {
            this.$getHttp("/api/mobile/public/getPersonalHome", {
                otherId: id,
                ownerId: ""
            }).then(res => {
                if (res.code == 200) {
                    let obj = res.personalHomeData;
                    // 判断身份状态
                    if (obj.businessType == "0" || obj.businessType == "") {
                        // 用户为普通人
                        obj.type = 1;
                    } else if (obj.businessType == 1) {
                        if (obj.shopType == 1) {
                            // 用户为房源商家、经纪人
                            obj.type = 2;
                        }
                    } else if (obj.businessType == 2) {
                        if (obj.shopType == 1 || obj.shopType == 2) {
                            if (obj.isShop == 1) {
                                // 用户为车源商家
                                obj.type = 3;
                            } else {
                                // 用户为车源经纪人
                                obj.type = 4;
                            }
                        } else if (obj.shopType == 3 || obj.shopType == 4) {
                            // 用户为车源服务商
                            obj.type = 5;
                        } else {
                            // 有时错误数据，返回’‘
                            // 用户为车源经纪人
                            obj.type = 4;
                        }
                    }
                    this.agentInfo = obj;
                    if (localStorage.getItem("userInfo")) {
                        this.disa =
                            obj.id == JSON.parse(localStorage.getItem("userInfo")).id;
                    }
                    this.loading = false;
                    if (obj.type == 1) {
                        // 普通人 - 二手车
                        this.xuanzhong = 3;
                    } else if (obj.type == 5) {
                        // 查服务
                        this.xuanzhong = 8;
                    }
                    this.getMoreData();
                }
            });
        },
        // 关注
        // 关注
        collect2(item, flag) {
            console.log(item);
            if (this.loginstate) {
                if (item.businessType == 2) {
                    this.$postHttp(
                        "/api/mobile/vehicleOwner/collectionOrCancelCollection",
                        {
                            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
                            collectionType: "1",
                            relationId: item.id,
                            ids:
                                this.agentInfo.collectionAttention &&
                                    this.agentInfo.collectionAttention.id
                                    ? this.agentInfo.collectionAttention.id
                                    : ""
                        }
                    ).then(data => {
                        if (data.code == 200) {
                            this.getUserInfoByUserId(this.id, this.userId);
                            this.$message({
                                message: data.msg,
                                type: "success",
                                offset: 120,
                                duration: 2000
                            });
                            if (this.agentInfo.whetherCollection == "0") {
                                this.addIntegral(5, "关注用户");
                            }
                        }
                    });
                } else {
                    this.$postHttp("/mob/user/saveUserCollection", {
                        userId: JSON.parse(localStorage.getItem("userInfo")).id,
                        type: "1",
                        cbType: "3",
                        relationId: item.id,
                        cancel: item.collectionBrowsing ? "1" : ""
                    }).then(data => {
                        if (data.code == 200) {
                            this.getUserInfoByUserId(this.id, this.userId);
                            this.$message({
                                message: data.msg,
                                type: "success",
                                offset: 120,
                                duration: 2000
                            });
                            if (this.agentInfo.whetherCollection == "0") {
                                this.addIntegral(5, "关注用户");
                            }
                        }
                    });
                }
            } else {
                this.$message({
                    message: "请登录之后在收藏！",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
            }
        },
        getMoreData() {
            this.houseList = [];
            if (this.xuanzhong == 1) {
                // 全部
                if (this.agentInfo.type == 2) {
                    // 用户为房源商家、经纪人
                    this.getfyPers(this.id, "", "");
                } else if (this.agentInfo.type == 3) {
                    // 车源商家
                    this.getPers(this.id, "");
                } else if (this.agentInfo.type == 4) {
                    // 车源经纪人
                    this.getPers(this.id, "1,2");
                }
            } else if (this.xuanzhong == 2) {
                // 到店新车
                this.getPers(this.id, "1");
            } else if (this.xuanzhong == 3) {
                // 二手车
                this.getPers(this.id, "2");
            } else if (this.xuanzhong == 4) {
                // 车系
                this.getPers(this.id, "3");
            } else if (this.xuanzhong == 5) {
                // 新房
                // this.transactionType = "2";
                // this.newOld = "1";
                this.getfyPers(this.id, "2", "1");
            } else if (this.xuanzhong == 6) {
                // 二手
                this.getfyPers(this.id, "2", "2");
            } else if (this.xuanzhong == 7) {
                // 出租
                this.getfyPers(this.id, "1", "");
            } else if (this.xuanzhong == 8) {
                // 服务项目
                this.getfwPers(this.id);
            } else if (this.xuanzhong == 9) {
                // 帮友圈
                this.getByq();
            } else if (this.xuanzhong == 10) {
                // 招聘
                this.getRecruit();
            }
        },
        // 获取招聘
        getRecruit() {
            let that = this;
            this.$getHttp("/api/mobile/personnelOwner/getRecruitmentPosition", {
                ...this.housePage,
                userId: this.id
            }).then(res => {
                this.houseList = res.recruitment.pageList;
                this.housetotal = res.recruitment.pageCount;
            });
        },
        getPers(userId, vehicleType) {
            this.$getHttp("/api/mobile/vehicleOwner/getVehicleInformation", {
                ...this.housePage,
                userId,
                vehicleType
            }).then(res => {
                if (res.code == 200) {
                    this.houseList = res.vehicleInformation.pageList;
                    this.housetotal = res.vehicleInformation.pageCount;
                }
            });
        },
        getfyPers(userId, transactionType, newOld) {
            this.$getHttp("/mob/home/getHouseInfo", {
                ...this.housePage,
                userId,
                transactionType,
                newOld,
                isLz: "0",
                examineStatus: "2",
                upStatus: "1"
            }).then(res => {
                if (res.code == 200) {
                    res.list.forEach(e => {
                        //判断该对象是否存在该属性
                        // if('FLOOR' in e){
                        // 	e.foors = this.floor(e.FLOOR)
                        // }
                        if (e.hasOwnProperty("FLOOR")) {
                            if (e.FLOOR.indexOf("|") == -1) {
                                e.foors = "";
                            } else {
                                e.foors =
                                    e.FLOOR.split("|")[0] +
                                    "层/" +
                                    "共" +
                                    e.FLOOR.split("|")[1] +
                                    "层";
                            }
                        }
                        if (!e.hasOwnProperty("shop_name")) {
                            e.shop_name = "个人房源";
                        }
                    });
                    this.houseList = res.list;
                    this.housetotal = res.count;
                }
            });
        },
        getfwPers(userId) {
            this.$getHttp("/api/mobile/vehicleOwner/getPersonalHomeOwnerServices", {
                ...this.housePage,
                userId
            }).then(res => {
                if (res.code == 200) {
                    this.houseList = res.ownerServiceList.pageList;
                    this.housetotal = res.ownerServiceList.pageCount;
                }
            });
        },
        getByq() {
            this.$getHttp(
                "/api/mobile/vehicleOwner/getHelpingFriendsCircleByPublisher",
                { ...this.housePage, publisherId: this.id }
            ).then(res => {
                if (res.code == 200) {
                    res.helpingFriendsCircleList.pageList.forEach(item => {
                        item.chage = 0;
                        item.picture = this.manageImg(item.picture);
                        item.imageList = this.manageImg(item.picture);
                        item.video = this.manageImg(item.video);
                    });
                    this.ceshiArr = res.helpingFriendsCircleList.pageList;
                    this.housetotal = res.helpingFriendsCircleList.pageCount;
                    console.log("ceshiArrceshiArrceshiArr", this.ceshiArr);
                }
            });
        },
        getHouseInfo() {
            this.$getHttp("/mob/home/getHouseInfo", this.housePage).then(data => {
                if (data.code == 200) {
                    data.list.forEach(e => {
                        //判断该对象是否存在该属性
                        if (e.hasOwnProperty("FLOOR")) {
                            if (e.FLOOR.indexOf("|") == -1) {
                                e.foors = "";
                            } else {
                                e.foors =
                                    e.FLOOR.split("|")[0] +
                                    "层/" +
                                    "共" +
                                    e.FLOOR.split("|")[1] +
                                    "层";
                            }
                        }
                    });
                    this.houseList = data.list;
                    this.housetotal = data.count;
                }
            });
        },
        getUser() {
            let user = JSON.parse(localStorage.getItem("userInfo"));

            if (user != null) {
                this.loginstate = true;
                this.user = user;
                this.userId = user.id;
                this.housePage.userId = user.id;
                // this.$getHttp("/mob/user/getIsCollection",{userId:user.id,cbType:3,type:1,relationId:this.$route.query.id}).then((data) =>{
                // 	if(data.code == 200){
                // 		this.isCollection = data.isCollection
                // 	}
                // })
                // this.$postHttp('/mob/user/saveUserCollection',{
                // 	userId:user.id,
                // 	type:2,
                // 	cbType:3,
                // 	relationId:this.$route.query.id,
                // }).then((data)=>{

                // })
            } else {
                this.housePage.userId = "";
                this.loginstate = false;
            }
        },
        rateChage(e) {
            if (this.loginstate) {
                // this.disa = true;
                this.$postHttp("/mob/user/saveScoreInfo", {
                    agentId: this.agentInfo.id,
                    userId: JSON.parse(localStorage.getItem("userInfo")).id,
                    score: e,
                    businessType: 2
                }).then(data => {
                    if (data.code == 200) {
                        this.$message({
                            message: "评分成功！",
                            type: "success",
                            offset: 120,
                            duration: 2000
                        });

                        this.getUserInfoByUserId(this.id, this.userId);
                    }
                });
            } else {
                this.$message({
                    message: "请登录之后在进行评分",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
            }
        },

        jubaoClick() {
            this.$refs.report.jubaoGuan();
        },
        floor(a) {
            var fool = a.split(",");
            if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
            if (fool[0] == 2)
                return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
            if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
        },
        details(item, index) {
            if (index == 1) {
                this.openUrl({
                    path: "/index/newSourceDetails",
                    query: {
                        id: item.id
                    }
                });
            } else if (index == 2) {
                if (item.transaction_type == 1) {
                    this.openUrl({
                        path: "/index/leaseDetails",
                        query: {
                            id: item.id
                        }
                    });
                } else {
                    this.openUrl({
                        path: "/index/newHouseDetails",
                        query: {
                            id: item.id
                        }
                    });
                }
            } else if (index == 3) {
                this.openUrl({
                    path: "/index/serviceDetails",
                    query: {
                        id: item.id
                    }
                });
            }
        },
        // 违规次数
        weiguiClick(item) {
            // this.disa = true;
            this.bUserId = item.id;
            this.businessType = "";
            // item.businessType;
            setTimeout(() => {
                this.$refs.inform.getReportMyRecord();
            }, 100);
        },
        // 他的公司
        companyDeilta(item) {
            if (item.businessType == 1) {
                const routeLink = this.$router.resolve({
                    path: "/index/ShopDetails?id=" + item.shopId
                });
                window.open(routeLink.href, "_self");
            } else if (item.businessType == 2) {
                if (item.shopType == 1 || item.shopType == 2) {
                    const routeLink = this.$router.resolve({
                        path: "/index/newDealerDetails?id=" + item.shopId
                    });
                    window.open(routeLink.href, "_self");
                } else {
                    const routeLink = this.$router.resolve({
                        path: "/index/ownerServiceDetails?id=" + item.shopId
                    });
                    window.open(routeLink.href, "_self");
                }
            } else {
                this.myErrorMessage("当前为个人用户!");
            }
        },
        shopdetails(item, index) {
            if (index == 1) {
                if (!item.distributor) {
                    this.$message({
                        message: "个人车源！",
                        type: "error",
                        offset: 120,
                        duration: 2000
                    });
                    return;
                }
                this.openUrl({
                    path: "/index/newDealerDetails",
                    query: {
                        id: item.distributor.id
                    }
                });
            } else {
                if (!item.shop_name) {
                    this.$message({
                        message: "个人房源！",
                        type: "error",
                        offset: 120,
                        duration: 2000
                    });
                    return;
                }
                const routeLink = this.$router.resolve({
                    path: "/index/ShopDetails?id=" + item.shop_id
                });
                window.open(routeLink.href, "_blank");
            }
        },
        //开启聊天
        chat(item) {
            if (this.loginstate) {
                this.$refs.chats.chatOpne(item.id);
            } else {
                this.$message({
                    message: "请登录！",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
            }
        },
        phoneCheck() {
            if (this.loginstate) {
                if (!this.phonestate) {
                    this.showPhone();
                }
                this.phonestate = true;
            } else {
                this.$message({
                    message: "请登录！",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
            }
        },
        currenthouse(e) {
            this.scrollToElement(document.querySelector(".bottom"));
            this.housePage.pageNo = e;
            this.getMoreData();
        },
        titClick(index) {
            this.housePage.pageNo = 1;
            this.xuanzhong = index;
            this.getMoreData();
        },
        // 获取帮友圈数据
        friendsCircle() {
            let arr = [{ id: 1 }, { id: 2 }];
            arr.forEach(v => {
                v.chage = 0;
            });
            this.ceshiArr = arr;
        },
        zhankaiClick(item) {
            this.ceshiArr.forEach(v => {
                if (v.id == item.id) {
                    if (v.chage == 0) {
                        v.chage = 1;
                    } else {
                        v.chage = 0;
                    }
                }
            });
        },
        //处理图片
        manageImg(imgs) {
            if (!imgs) return [];
            var arr = [];
            if (null != imgs) {
                if (imgs.indexOf("|") == -1) {
                    if (imgs != "") {
                        arr.push(imgs);
                        console.log("imgs", arr);
                        return arr;
                    } else {
                        return [];
                    }
                } else {
                    return imgs.split("|");
                }
            }
        },
        // 关注
        collect(item, flag) {
            if (this.loginstate) {
                this.$postHttp(
                    "/api/mobile/vehicleOwner/collectionOrCancelCollection",
                    {
                        collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
                        collectionType: "3",
                        relationId: item.id,
                        ids:
                            item.collectionAttention && item.collectionAttention.id
                                ? item.collectionAttention.id
                                : ""
                    }
                ).then(data => {
                    if (data.code == 200) {
                        this.getMoreData();
                        this.$message({
                            message: data.msg,
                            type: "success",
                            offset: 120,
                            duration: 2000
                        });
                    }
                });
            } else {
                this.$message({
                    message: "请登录之后在收藏！",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
            }
        },
        goLike(item, flag) {
            if (this.loginstate) {
                // 去点赞
                var obj = {
                    userId: JSON.parse(localStorage.getItem("userInfo")).id,
                    circleId: item.id
                };
                item.likeRecord && item.likeRecord.id
                    ? (obj.id = item.likeRecord.id)
                    : "";
                this.$postHttp("/api/mobile/vehicleOwner/upperOrCancelThumb", {
                    // id: item.id,
                    ...obj
                }).then(data => {
                    if (data.code == 200) {
                        this.getMoreData();
                        this.$message({
                            message: data.msg,
                            type: "success",
                            offset: 120,
                            duration: 2000
                        });
                    }
                });
            } else {
                this.$message({
                    message: "请登录之后在点赞！",
                    type: "error",
                    offset: 120,
                    duration: 2000
                });
            }
        }
    }
};
</script>
  
<style lang="less" scoped>
.minpian {
    display: flex;
    width: 940px;
    margin: auto;
    padding: 20px 0;

    .minpian_img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: contain;
        cursor: pointer;
        background-color: #00000033;
        margin-right: 12px;
    }

    .minpian_center {
        // padding-left: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .minpian_center_one {
            cursor: pointer;
            display: flex;
            color: #333;
            justify-content: space-between;
            align-items: center;

            .jjr {
                width: 58px;
                height: 22px;
                border-radius: 14px;
                border: 1px solid #64b6a8;
                font-size: 12px;
                font-weight: 400;
                color: #64b6a8;
                text-align: center;
                line-height: 22px;
                margin-left: 15px;
            }

            .wei {
                display: flex;
                align-items: center;
            }
        }

        .contactWay {
            display: flex;
            align-items: center;

            .lxfs-item {
                position: relative;
                color: #333333;

                .lxfs-item-phone {
                    position: absolute;
                    bottom: o;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }

            img {
                width: 33px;
                height: 33px;
            }
        }
    }
}

.helpFriends {
    width: 940px;
    margin: 0 auto;
    margin-top: 1px;

    .helpFriends_title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .helpFriends_title_left {
            display: flex;
            align-items: center;

            .helpFriends_title_left_img {
                border-radius: 50%;
                width: 112px;
                height: 112px;
            }

            .helpFriends_title_left_span {
                font-size: 36px;
                font-weight: 400;
                color: #333333;
                margin-left: 40px;
            }
        }

        .helpFriends_title_right {
            display: flex;
            justify-content: space-between;
            cursor: pointer;
        }
    }

    .helpFriends_article {
        margin-top: 34px;

        .helpFriends_article_text {
            font-size: 26px;
            font-weight: 500;
            color: #333333;
            line-height: 30px;
        }

        .helpFriends_article_active {
            font-size: 26px;
            font-weight: 500;
            color: #333333;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        }

        .unfold {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 26px;
            font-weight: 400;
            color: #64b6a8;

            span {
                cursor: pointer;
            }

            .unfold_img {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }
        }

        .unfold_yc {
            display: none;
        }
    }

    .img_one {
        width: 100%;
        height: 290px;
        margin-top: 30px;

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }
    }

    .img_two {
        width: 100%;
        height: 290px;
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        img {
            object-fit: cover;
            width: 48%;
            height: 100%;
            border-radius: 8px;
        }
    }

    .img_three {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 30px;

        img {
            object-fit: cover;
            width: 30%;
            height: 100%;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    }

    .video {
        width: 100%;
        height: 290px;
        margin-top: 30px;

        video {
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }
    }

    .byq_bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        align-items: center;

        .byq_bottom_right {
            display: flex;
            align-items: center;

            .byq_bottom_right_item {
                display: flex;
                align-items: center;
                font-size: 26px;
                font-weight: 400;
                color: #333333;
                margin-right: 35px;

                .byq_bottom_right_item_img {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                }
            }
        }
    }
}

.bottom {
    width: 940px;
    margin-left: 50%;
    transform: translateX(-50%);
    color: #333333;
    margin-top: 0px;

    .titLiat {
        width: 940px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 40px;
        margin-bottom: 15px;

        .li {
            display: inline-block;
            vertical-align: top;
            margin-right: 40px;
            color: #333;
            cursor: pointer;

            p {
                font-size: 26px;
            }

            img {
                width: 32px;
                height: 16px;
                margin-left: 50%;
                transform: translateX(-50%);
                margin-top: -8px;
            }
        }

        .cur {
            color: #64b6a8;
            border: 0;
            transform: scale(1.1);
        }
    }

    .tit {
        font-weight: 600;
        font-size: 32px;
        margin-bottom: 24px;
    }

    .list {
        width: 100%;

        .li {
            position: relative;
            padding-bottom: 24px;
            margin-bottom: 24px;
            border-bottom: 1px solid #e0e0e0;

            .biao {
                width: 300px;
                height: 200px;
            }

            .name {
                display: inline-block;
                vertical-align: top;
                margin-left: 24px;
                position: relative;
                height: 200px;
                width: 700px;

                .t_1 {
                    color: #333;
                    font-size: 26px;
                    cursor: pointer;
                }

                .t_2 {
                    font-size: 18px;
                    color: #666666;
                    margin-top: 12px;
                }

                .t_3 {
                    font-size: 18px;
                    color: #666666;
                    margin-top: 12px;
                }

                .t_4 {
                    position: absolute;
                    font-size: 18px;
                    color: #666666;
                    bottom: 0;
                    left: 0;
                    white-space: nowrap;

                    img {
                        width: 31px;
                        height: 31px;
                    }

                    div {
                        display: inline-block;
                        width: 90px;
                        height: 30px;
                        background: #ffffff;
                        border: 1px solid #64b6a8;
                        border-radius: 4px;
                        text-align: center;
                        line-height: 30px;
                        margin-left: 24px;
                        color: #64b6a8;
                    }
                }
            }

            .qian {
                position: absolute;
                top: 62px;
                right: 0;

                .p1 {
                    //width: 120px;
                    font-size: 32px;
                    color: #e00000;
                    text-align: center;
                }

                .p2 {
                    //width: 120px;
                    font-size: 18px;
                    color: #333333;
                    text-align: center;
                }
            }
        }
    }
}

.list {
    width: 940px;
    margin: auto;

    .li {
        position: relative;
        padding-bottom: 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid #e0e0e0;

        .biao {
            width: 300px;
            height: 200px;
            object-fit: contain;
            cursor: pointer;
        }

        .name {
            display: inline-block;
            vertical-align: top;
            margin-left: 24px;
            position: relative;
            height: 200px;
            width: 700px;

            .t_1 {
                color: #333;
                font-size: 26px;
                cursor: pointer;
            }

            .t_2 {
                font-size: 18px;
                color: #666666;
                margin-top: 12px;
            }

            .t_3 {
                font-size: 18px;
                color: #666666;
                margin-top: 12px;
            }

            .t_4 {
                position: absolute;
                font-size: 18px;
                color: #666666;
                bottom: 0;
                left: 0;
                white-space: nowrap;

                img {
                    width: 31px;
                    height: 31px;
                }

                div {
                    display: inline-block;
                    /* width: 90px; */
                    height: 30px;
                    background: #ffffff;
                    border: 1px solid #64b6a8;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 30px;
                    margin-left: 24px;
                    color: #64b6a8;
                }
            }
        }

        .qian {
            position: absolute;
            top: 62px;
            right: 0;

            .p1 {
                //width: 120px;
                font-size: 32px;
                color: #e00000;
                text-align: center;
            }

            .p2 {
                //width: 120px;
                font-size: 18px;
                color: #333333;
                text-align: center;
            }
        }
    }

    .lify {
        position: relative;
        padding-bottom: 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid #e0e0e0;

        .biao {
            width: 300px;
            height: 200px;
            object-fit: contain;
            cursor: pointer;
        }

        .name {
            display: inline-block;
            vertical-align: top;
            margin-left: 24px;
            position: relative;
            height: 200px;
            width: 700px;

            .t_1 {
                color: #333;
                font-size: 26px;
                cursor: pointer;
            }

            .t_2 {
                font-size: 18px;
                color: #666666;
                margin-top: 12px;
            }

            .t_3 {
                font-size: 18px;
                color: #666666;
                margin-top: 12px;
            }

            .t_4 {
                position: absolute;
                font-size: 18px;
                color: #666666;
                bottom: 0;
                left: 0;
                white-space: nowrap;

                img {
                    width: 31px;
                    height: 31px;
                }

                div {
                    display: inline-block;
                    /* width: 90px; */
                    height: 30px;
                    background: #ffffff;
                    border: 1px solid #64b6a8;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 30px;
                    margin-left: 24px;
                    color: #64b6a8;
                }
            }
        }

        .qian {
            position: absolute;
            top: 62px;
            right: 0;

            .p1 {
                //width: 120px;
                font-size: 32px;
                color: #e00000;
                text-align: center;
            }

            .p2 {
                //width: 120px;
                font-size: 18px;
                color: #333333;
                text-align: center;
            }
        }
    }

    .lifw {
        position: relative;
        padding-bottom: 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid #e0e0e0;

        .biao {
            width: 300px;
            height: 200px;
            border-radius: 10px;
        }

        .fwxm {
            display: inline-block;
            vertical-align: top;
            margin-left: 24px;
            position: relative;
            height: 200px;
            width: 700px;

            .t_1 {
                font-size: 24px;
                cursor: pointer;
                font-weight: 600;
                color: #64b6a8;
            }

            .t_2 {
                font-size: 16px;
                color: #666666;
                margin-top: 12px;
            }
        }

        .name {
            display: inline-block;
            vertical-align: top;
            margin-left: 24px;
            position: relative;
            height: 200px;
            width: 700px;

            .t_1 {
                font-size: 24px;
                cursor: pointer;
                font-weight: 600;
            }

            .t_2 {
                font-size: 16px;
                color: #666666;
                margin-top: 12px;
            }

            .t_3 {
                font-size: 16px;
                color: #666666;
                margin-top: 12px;
            }

            .t_4 {
                position: absolute;
                font-size: 16px;
                color: #666666;
                bottom: 0;
                left: 0;
                white-space: nowrap;

                img {
                    vertical-align: top;
                    width: 31px;
                    height: 31px;
                    border-radius: 31px;
                }

                div {
                    display: inline-block;
                    //width: 90px;
                    padding: 0px 5px;
                    height: 30px;
                    background: #ffffff;
                    border: 1px solid #64b6a8;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 30px;
                    margin-left: 24px;
                    color: #64b6a8;
                }
            }
        }

        .qian {
            position: absolute;
            top: 62px;
            right: 0;

            .p1 {
                //width: 120px;
                //font-size: 32px;
                font-size: 30px;
                color: #e00000;
                text-align: center;
            }

            .p2 {
                //width: 120px;
                //font-size: 18px;
                font-size: 16px;
                color: #333333;
                text-align: center;
            }
        }
    }
}

.fenye {
    width: 100%;
    height: 50px;
    text-align: center;
    margin: 60px 0px;

    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #64b6a8;
    }
}

/deep/.el-rate__icon {
    font-size: 30px;
}

.vip-level {
    width: 80px;

    text-align: center;
    padding: 4px 0;

    border: 1px solid #bd90d9;
    border-radius: 4px 4px 4px 4px;
    font-size: 15px;
    background: #f6f0ff;
    font-weight: 500;
    color: #bd90d9;
}
</style>
  